<template>
  <div class="carousel-container">
    <el-carousel 
      :interval="3000" 
      type="1" 
      height="500px"
      indicator-position="outside"
      arrow="always"
    >
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <div class="carousel-item">
          <img :src="image.src" :alt="image.alt" class="carousel-image" />
          <div class="image-title">{{ image.title }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
// 使用 import 引入图片
import image1 from '@/assets/images/lunbo1.png'
import image2 from '@/assets/images/lunbo2.png'
import image3 from '@/assets/images/lunbo3.png'

const images = [
  {
    src: image1,
    alt: '图片1',
    title: ''
  },
  {
    src: image2,
    alt: '图片2',
    title: ''
  },
  {
    src: image3,
    alt: '图片3',
    title: ''
  }
]
</script>

<style scoped lang='scss'>
.carousel-container {
    width: 1240px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;

    :deep(.el-carousel) {
    .el-carousel__item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      .carousel-item {
        position: relative;
        width: 100%;
        height: 100%;
        
        .carousel-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
        
        .image-title {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          color: white;
          padding: 20px;
          font-size: 18px;
          text-align: center;
        }
      }
    }
    
    .el-carousel__item.is-active {
      .carousel-image {
        transform: scale(1.05);
      }
    }
    
    .el-carousel__arrow {
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      font-size: 24px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    
    .el-carousel__indicators {
      .el-carousel__button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #c0c4cc;
      }
      
      .is-active {
        .el-carousel__button {
          background-color: #409eff;
        }
      }
    }
  }

    img {
        width: 100%;
        height: 100%;
    }
}
</style>